<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/pay.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <!-- 头部 -->
    <header class="container">
        <div class="row zbb_head">
            <a href="./regiest.html" class="col-md-2">亲，请登录 免费注册</a>
            <ul class="list-inline col-md-10 text-right">
                <li><a href="./index.html">商城首页</a></li>
                <li><a href="javascript:;"><span class="iconfont">&#xe645;</span>个人中心</a></li>
                <li><a href="javascript:;"><span class="iconfont">&#xe73c;</span>购物车2</a></li>
                <li><a href="javascript:;"><span class="iconfont">&#xe663;</span>收藏夹</a></li>
            </ul>
        </div>
    </header>
    <!-- 搜索 -->
    <nav class="zbb_nav">
        <img src="./images/logobig.png" style="margin-left: 130px;">
        <form action="">
            <input type="search" placeholder="搜索">
            <button>搜索</button>
        </form>
    </nav>
    <!-- 地址 -->
    <div class="adder">
        <h4 style="font-size: 15px;font-weight:bold;">确认收货地址<a href="javascript:;" style="font-weight: 400;"
                class="add1">使用新地址</a>
        </h4>
        <div class="max">
            <div class="main">
                <div class="m2_1">
                    <p style="font-weight: bold;">艾迪 15871145629</p>
                    <p>收货地址：湖北省 武汉市 武昌区 东湖路75号众环大厦</p><br>
                    <p>
                        <a href="javascript:;" class="mr1">设为默认 |</a>
                        <a href="javascript:;">编辑 </a>|
                        <a href="javascript:;" class="rm"> 删除</a>
                    </p>
                </div>
                <img src="./images/111.png">
            </div>
            <div class="main">
                <div class="m2_1">
                    <p style="font-weight: bold;">迪迦 15871145629</p>
                    <p>收货地址：湖北省 武汉市 洪山区 雄楚大道666号(中南财经政法大学)</p><br>
                    <p>
                        <a href="javascript:;" class="mr">设为默认 |</a>
                        <a href="javascript:;"> 编辑 </a>|
                        <a href="javascript:;" class="rm"> 删除</a>
                    </p>
                </div>
                <img src="./images/222.png">
            </div>
        </div>
    </div>
    <!-- 快递 -->
    <div class="kd">
        <h4 style="font-size: 15px;font-weight:bold;">选择物流方式</h4>
        <hr style="margin: 0px;">
        <div class="kd1">
            <div class="kd11">
                圆通
                <input type="radio" name="kuaidi">
            </div>
            <div class="kd12">
                申通
                <input type="radio" name="kuaidi">
            </div>
            <div class="kd13">
                韵达
                <input type="radio" name="kuaidi">
            </div>
            <div class="kd14">
                中通
                <input type="radio" name="kuaidi">
            </div>
            <div class="kd15">
                顺丰
                <input type="radio" name="kuaidi">
            </div>
            <div class="kd16">
                京东
                <input type="radio" name="kuaidi">
            </div>
        </div>
    </div>
    <!-- 支付方式 -->
    <div class="pay">
        <h4 style="font-size: 15px;font-weight:bold;">选择支付方式</h4>
        <hr style="margin: 0px;">
        <div class="paied">
            <div>
                <img src="">银联
            </div>
            <div>
                <img src="">微信
            </div>
            <div>
                <img src="">支付宝
            </div>
        </div>
    </div>
    <!-- 订单信息 -->
    <div class="ding">
        <h4 style="font-size: 15px;font-weight:bold;">确认订单信息</h4>

        <table cellspacing="0">
            <tr>
                <td><input type="checkbox" class="qx"></td>
                <td style="width: 500px;">商品信息</td>
                <td>数量</td>
                <td>单价</td>
                <td style="width: 190px;">金额</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="xw"></td>
                <td style="display: flex;height: 100px;align-items: center;">
                    <img src="./images/ccc.jpg" width="70px" height="70px" style="border: 1px solid #eee;">
                    <div style="text-align: left;">
                        <p>美康粉黛醉美唇膏持久保湿滋润防水不掉色</p>
                        <p style="color:#ccc;">颜色:12#川南玛瑙包装:裸装</p>
                    </div>
                </td>
                <td><button style="width: 30px;height:30px;">-</button><input type="text" value="1"><button
                        style="width: 30px;height:30px;">+</button></td>
                <td>39</td>
                <td>39</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="xw"></td>
                <td style="display: flex;height: 100px;align-items: center;">
                    <img src="./images/ccc.jpg" width="70px" height="70px" style="border: 1px solid #eee;">
                    <div style="text-align: left;">
                        <p>美康粉黛醉美唇膏持久保湿滋润防水不掉色</p>
                        <p style="color:#ccc;">颜色:10#蜜橘色+17#樱花粉包装:两支手袋装(送彩带)</p>
                    </div>
                </td>
                <td><button style="width: 30px;height:30px;">-</button><input type="text" value="1"><button
                        style="width: 30px;height:30px;">+</button>
                </td>
                <td>39</td>
                <td>39</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td>合计</td>
                <td class="all"></td>
            </tr>
        </table>
    </div>
    <!-- 结算 -->
    <div class="jies">
        <div class="jsuan">
            <p style="font-size: 34px;"><span style="font-size: 15px;">实付款：</span>￥<span class="all1"
                    id="userName">244</span></p>
            <p style="font-size: 16px;" class="addr"><span style="font-weight: bold;" class="jisong">寄送至:</span>湖北省 武汉市
                武昌区 东湖路75号众环大厦
            </p>
            <p style="font-size: 16px;" class="use"><span style="font-weight: bold;">收货人：</span>艾迪 15871145629</p>
        </div>
    </div>
    <p class="ok"><a onclick="login()">提交订单</a></p>
    <!-- 底部 -->
    <div class="footer">
        <p class="ft1">
            <a href="javascript:;">恒望科技</a>
            <a href="./index.html">商城首页</a>
            <a href="javascript:;">支付宝</a>
            <a href="javascript:;">物流</a>
        </p>
        <hr style="margin-top: 0px;">
        <p><a href="javascript:;">关于恒望 </a><a href="javascript:;"> 合作伙伴</a><a href="javascript:;"> 联系我们</a><a
                href="javascript:;"> 网站地图</a> ◎ 2015-2025
            Hengwang.com版权所有.更多模板模板在线厚朴网络淘宝店-Collect
            from模板在线厚朴网络淘宝店</p>
    </div>
</body>

</html>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
    $('.paied>div').eq(0).on('click', function () {
        // console.log($(this).children().prop('src'));
        $(this).children().prop('src', './images/wangyin.jpg');
        $(this).siblings().children().prop('src', '')
    })
    $('.paied>div').eq(1).on('click', function () {
        // console.log($(this).children().prop('src'));
        $(this).children().prop('src', './images/weizhifu.jpg')
        $(this).siblings().children().prop('src', '')
        // console.log($(this).siblings().children().prop('src', ''))
    })
    $('.paied>div').eq(2).on('click', function () {
        // console.log($(this).children().prop('src'));
        $(this).children().prop('src', './images/zhifubao.jpg')
        $(this).siblings().children().prop('src', '')
    })

    $('.mr').on('click', function () {
        // alert('是否修改默认地址');
        $('.mr1').addClass('mr');
        $('.mr1').parent().parent().next().prop('src', './images/222.png');
        $('.mr1').removeClass('mr1');
        $(this).parent().parent().next().prop('src', './images/111.png');
        $(this).addClass('mr1');
        var te = $(this).parent().prev().prev().text();
        var te2 = $(this).parent().prev().prev().prev().text();
        var te1 = "寄送至: " + te.split('：')[1];
        var te3 = "收货人: " + te2;
        $('.addr').text(te1);
        $('.use').text(te3);
    })
    $('.mr1').on('click', function () {
        // alert('是否修改默认地址');
        $('.mr1').addClass('mr');
        $('.mr1').parent().parent().next().prop('src', './images/222.png');
        $('.mr1').removeClass('mr1');
        $(this).parent().parent().next().prop('src', './images/111.png');
        $(this).addClass('mr1');
        var te = $(this).parent().prev().prev().text();
        var te2 = $(this).parent().prev().prev().prev().text();
        var te1 = "寄送至: " + te.split('：')[1];
        var te3 = "收货人: " + te2;
        $('.addr').text(te1);
        $('.use').text(te3);
    })
    var reg = /1/
    $('.rm').on('click', function () {
        var src1 = $(this).parent().parent().next().prop('src');
        src2 = src1.split('/')[4]
        console.log(src2);
        if (reg.test(src2)) {
            alert('默认地址，不可删除');
        } else {
            $(this).parent().parent().remove();
        }
    })
    var qx = $('.qx');
    var xw = $('.xw');
    //全选
    qx.click(function () {
        console.log($(this).prop('checked'));
        if ($(this).prop('checked')) {
            xw.prop('checked', true);
        } else {
            xw.prop('checked', false);
        }
    })
    //小选
    xw.click(function () {
        // console.log($('.xw:checked').length)
        if ($('.xw:checked').length == $('.xw').length) {
            $('.qx').prop('checked', true);
        } else {
            $('.qx').prop('checked', false);
        }
    })
    //实现购物车数量的增减
    var num = 78;
    $('.all').text(num);
    $('.all1').text(num);
    $('button').click(function () {
        var val = $(this).siblings('input').val();
        var price = $(this).parent().nextAll().eq(0).text();
        // console.log(typeof (price))
        if ($(this).index() == 0) {
            if (val > 1) {
                val--;
                $(this).parent().nextAll().eq(1).text(val * price);
                num = num - Number(price);
                $('.all').text(num)
                $('.all1').text(num)
            }
        } else {
            val++;
            $(this).parent().nextAll().eq(1).text(val * price);
            // $('.all').text(val * price)
            num = num + Number(price);
            $('.all').text(num)
            $('.all1').text(num)
        }
        $(this).siblings('input').val(val)
    })
</script>
<script>
    //设置cookie
    var setCookie = function (name, value, day) {
        console.log(value);
        var expires = day * 24 * 60 * 60 * 1000;
        var exp = new Date();
        exp.setTime(exp.getTime() + expires);
        document.cookie = value;
    };
    //传递cookie
    function login() {
        var name = document.getElementById("userName");
        setCookie('userName', name.innerText, 7)
        location.href = 'paied.html'
    }
</script>